<template>
  <div class="v-dropdown" :style="{ width: `${width}px`, height: `${height}px` }">
    <el-dropdown trigger="click" @command="selVal">
      <button>
        <span class="el-dropdown-link">
          {{ val || placeholder }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </button>
      <el-dropdown-menu slot="dropdown" :class="dropdownMenuClass">
        <el-dropdown-item v-if="showList[index]" v-for="(item, index) in options" :key="item.id" :command="item[itemKey]">
          {{ item[itemValue] }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      // 宽度
      width: {
        type: Number,
        default: 100
      },
      // 高度
      height: {
        type: Number,
        default: 60
      },
      // 设置默认值的key
      value: {
        type: String,
        default: ''
      },
      // 提示语
      placeholder: {
        type: String,
        default: '请选择'
      },
      // 选项列表
      options: {
        type: Array
      },
      // 选项的key
      itemKey: {
        type: String,
        default: 'value'
      },
      // 选项的值
      itemValue: {
        type: String,
        default: 'label'
      },
      // 下拉框的class
      dropdownMenuClass: {}
    },
    data () {
      return {
        val: '',
        showList: []
      }
    },
    methods: {
      selVal (val) {
        this.options.forEach((item, index) => {
          this.showList[index] = true
          if (item[this.itemKey] === val) {
            this.val = item[this.itemValue]
            this.showList[index] = false
            this.$emit('on-change', item)
          }
        })
      }
    },
    created () {
      this.options.forEach((item, index) => {
        this.showList[index] = true
        if (item[this.itemKey] === this.value) {
          this.val = item[this.itemValue]
          this.showList[index] = false
        }
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .v-dropdown
    cursor pointer
    display inline-block
    .el-dropdown
      width 100%
      height 100%
      button
        outline none
        border none
      .el-dropdown-selfdefine:hover
        background #A1CFFF
      .el-dropdown-selfdefine:active
        background #3A7CC1
      .el-dropdown-selfdefine
        text-align left
        display inline-block
        height 100%
        width 100%
        line-height 1
        color #fff
        background #016DFB
        padding 0 10px
        position relative
        .el-icon-arrow-down
          position absolute
          right 10px
  .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover
    background-color #f5f7fa
    color #5a5e66
</style>
